<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebGL</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #fff;
      }
      /* canvas{
            width: 100%;

        } */
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const gl = canvas.getContext("webgl");
      //第一次创建webgl绘图上下文，需要设置视口大小
      gl.viewport(0, 0, canvas.width, canvas.height);

      //创建顶点着色器
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建顶点着色器的源码，需要编写gls代码
      gl.shaderSource(
        vertexShader,
        `
        attribute vec4 a_Position;//声明attribute变量
        uniform mat4 u_Matrix;//声明uniform变量
        varying vec4 v_Color;//声明varying变量---传递给片段着色器的变量
        void main(){
            gl_Position = u_Matrix * a_Position;//将顶点坐标赋值给gl_Position
            v_Color = gl_Position;//将gl_Position赋值给v_Color
        }
        `
      );
      //编译顶点着色器
      gl.compileShader(vertexShader);

      //创建片元着色器
      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //编写片元着色器的源码
      gl.shaderSource(
        fragmentShader,
        `
        precision mediump float;//设置精度
        varying vec4 v_Color;//声明varying变量
        void main(){
            gl_FragColor = v_Color;//将varying变量赋值给gl_FragColor
        }
        `
      );
      //编译片元着色器
      gl.compileShader(fragmentShader);

      //创建程序连接顶点着色器和片元着色器
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader); //关联顶点着色器
      gl.attachShader(program, fragmentShader); //关联片元着色器
      gl.linkProgram(program); //链接程序
      gl.useProgram(program); //使用程序

      //创建顶点数据
      const vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);

      //创建缓冲区
      const buffer = gl.createBuffer(); //创建缓冲区
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer); //绑定缓冲区
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); //将顶点数据存储到缓冲区
      //获取顶点着色器中的a_Position变量
      const a_Position = gl.getAttribLocation(program, "a_Position");
      //将缓冲区中的顶点数据传递给a_Position变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
      gl.enableVertexAttribArray(a_Position);

      //
      const scale = {
        x: 1,
        y: 1,
        z: 1,
      };
      //   //创建矩阵
      //   const mat = new Float32Array([
      //     scale.x,
      //     0.0,
      //     0.0,
      //     0.0,
      //     0.0,
      //     scale.x,
      //     0.0,
      //     0.0,
      //     0.0,
      //     0.0,
      //     scale.x,
      //     0.0,
      //     0.0,
      //     0.0,
      //     0.0,
      //     1.0,
      //   ]);

      //清除canvas
      gl.clearColor(0.0, 0.0, 0.0, 0.0);
      gl.clear(gl.COLOR_BUFFER_BIT); //

      //绘制三角形
      gl.drawArrays(gl.TRIANGLES, 0, 3);

      function animate() {
        requestAnimationFrame(animate);
        if (scale.x <= -1) {
          scale.x = 1;
        } else {
          scale.x -= 0.01;
        }
        //创建矩阵
        const mat = new Float32Array([
          scale.x,
          0.0,
          0.0,
          0.0,
          0.0,
          scale.x,
          0.0,
          0.0,
          0.0,
          0.0,
          scale.x,
          0.0,
          0.0,
          0.0,
          0.0,
          1.0,
        ]);
        //获取着色器中的u_Matrix变量
        const u_Matrix = gl.getUniformLocation(program, "u_Matrix"); //
        //将矩阵传递给u_Matrix变量
        gl.uniformMatrix4fv(u_Matrix, false, mat);

        gl.clear(gl.COLOR_BUFFER_BIT); //
        gl.drawArrays(gl.TRIANGLES, 0, 3);
      }
      animate();
    </script>
  </body>
</html>
